<template>
	<view>
		<view class="form" style="padding-top: 40rpx;" v-if="MyIncome.balance && Number(MyIncome.balance) > 0">
			<view class="form-list">
				<view class="form-list-title">支付宝配置</view>
				<view class="form-item">
					<view class="form-item-label">姓名</view>
					<view class="input upload">
						<input type="text" placeholder="请输入姓名" v-model="form.alipay_name">
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">支付宝</view>
					<view class="input upload">
						<input type="text" placeholder="请输入支付宝账号" v-model="form.alipay">
					</view>
				</view>
				
				
				
			</view>
			<view class="form-list">
				<view class="form-list-title">银行卡配置</view>
				<view class="form-item">
					<view class="form-item-label">姓名</view>
					<view class="input upload">
						<input type="text" placeholder="请输入姓名" v-model="form.FullName">
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">开户行</view>
					<view class="input upload">
						<input type="text" placeholder="请输入开户行" v-model="form.OpeningBank">
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">银行卡</view>
					<view class="input upload">
						<input type="text" placeholder="请输入银行卡号" v-model="form.BankCard">
					</view>
				</view>
			</view>
		</view>
		<view class="form-btns" @click="submit">保存</view>
		<view class="footer" @click="change(!checked)">
			<label class="radio">
				<radio :checked="checked" />
			</label>
			请仔细阅读<text @click.stop="toRule(23)">《用户隐私协议》</text>并勾选。
		</view>
	</view>
</template>

<script>
	import {
		uploadImg
	} from '@/common/upload.js'
	import {
		InformationWithdrawalQRcode,
		InformationUserWithdrawalQRcode,
		InformationMyIncome
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				form: {
					wechat: '',
					alipay: '',
					alipay_name: '',
					OpeningBank: '',
					BankCard: '',
					FullName: ''
				},
				checked: false,
				MyIncome: ''
			};
		},
		onLoad() {
			uni.showLoading()
			InformationUserWithdrawalQRcode().then(res => {
				uni.hideLoading()
				this.form.wechat = res.data.wechat
				this.form.alipay = res.data.alipay
				this.form.alipay_name = res.data.alipay_name
				this.form.OpeningBank = res.data.OpeningBank
				this.form.BankCard = res.data.BankCard
				this.form.FullName = res.data.FullName
			})
		},
		onShow() {
			InformationMyIncome().then(res => {
				this.MyIncome = res.data
			})
		},
		methods: {
			change(e) {
				console.log('e=>', e)
				this.checked = e
			},
			toRule(id) {
				uni.navigateTo({
					url: '/pagesA/aboutUs/aboutUs?id=' + id
				})
			},
			// 上传
			selectClick(name) {
				uploadImg().then(res => {
					console.log('上传', res, name)
					this.form[name] = res.data.url
				})
			},
			submit() {
				// if(this.form.wechat === '' && this.form.alipay === '') {
				// 	uni.showToast({duration:3000,
				// 		title:"请上传收款码"
				// 	})
				// 	return
				// }
				if (!this.checked) {
					uni.showToast({duration:3000,
						title: '请阅读并同意用户隐私协议',
						icon: 'none'
					})
					return
				}
				uni.showLoading()
				InformationWithdrawalQRcode(this.form).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title: '保存成功！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.form-btns {

		margin: 0 auto;
		width: 690rpx;
		height: 80rpx;
		background: #23B97F;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: white;
		margin-top: 40rpx;

	}

	.bg1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 494rpx;
		z-index: -2;
	}

	.content {
		width: 100%;
		position: relative;
		padding-top: 30rpx;

	}

	.bg2 {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -3;
	}

	.setting {
		position: absolute;
		top: 0;
		left: 39rpx;

	}

	.userinfo {
		width: 690rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 8rpx 0rpx rgba(14, 67, 44, 0.15);
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 49rpx 56rpx;
		margin-bottom: 24rpx;

		.userinfo-name {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 36rpx;
			color: #292929;
			margin-bottom: 16rpx;
		}

		.userinfo-zc {
			height: 21rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #F6F7F8;
			padding: 14rpx;
			margin-bottom: 23rpx;
			background: rgba(1, 8, 0, 0.5);
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border-radius: 25rpx;
		}

		.userinfo-gs {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #292929;
			margin-bottom: 42rpx;
		}

		.userinfo-zy {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 25rpx;

			image {
				width: 28rpx;
				height: 25rpx;
				margin-right: 17rpx;
			}

			view {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}


		}

		.userinfo-zy:last-child {
			margin-bottom: 0;
		}
	}

	.form {
		width: 690rpx;
		margin: 0 auto;

		.form-list {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 24rpx;

			.form-list-title {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #EEEEEE;
			}

			.form-item {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 30rpx 0;

				.form-item-label {
					width: 150rpx;

					text {
						color: red;
					}
				}

				.input {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.input-tx {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 28rpx;
						color: #999999;
						flex: 1;
						min-width: 0;
						margin-right: 30rpx;
					}

					input {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 28rpx;

						flex: 1;
						min-width: 0;
						margin-right: 30rpx;
					}

					.ac {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 28rpx;
						color: #999999;
					}

					image {
						width: 11rpx;
						height: 22rpx;
					}
				}

				.upload {
					.upload-item {
						width: 100%;
						display: flex;
						align-items: center;

						image {
							width: 88rpx;
							height: 88rpx;
							margin-right: 40rpx;
						}

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #23B97F;
						}
					}
				}

				.tx-r {
					.input-tx {
						text-align: right;
					}
				}

				.select {
					.input-tx {
						text-align: left;
					}
				}
			}

			.form-item:last-child {
				padding-bottom: 0;
			}

			.form-list-add {
				height: 170rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 28rpx;
					margin-right: 20rpx;
					height: 28rpx;
				}

				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
				color: #23B97F;
			}
		}
	}

	.form-btn {
		margin: 0 auto;
		width: 690rpx;
		height: 80rpx;
		background: #23B97F;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: white;
		margin-top: 40rpx;
	}

	.lvli {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 38rpx 26rpx;
		// margin-top: 121rpx;

		.lvli-list {
			display: flex;

			.lvli-list-left {
				width: 30rpx;
				height: auto;
				position: relative;

				.lvli-list-spot {
					width: 30rpx;
					height: 30rpx;
				}

				.lvli-list-line {
					width: 1rpx;
					height: calc(100% - 60rpx);
					background: #FFCC02;
					position: absolute;
					top: 30rpx;
					left: 0;
					right: 0;
					bottom: 0;
					margin-top: 20rpx;
					margin: auto;
					transform: translateX(-50%);
				}
			}

			.lvli-list-rig {
				flex: 1;
				margin-left: 21rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #131313;
				padding-bottom: 81rpx;
			}
		}
	}

	textarea {
		width: 100%;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #131313;
		height: 200rpx;
		box-sizing: border-box;
		padding: 15rpx;
		background: #F6F7F8;
	}

	.ac {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #131313;
	}

	.radio {
		display: flex;
		align-items: center;
		justify-content: start !important;
	}

	.input-radio {
		width: 130rpx;
		height: 52rpx;
		background: #E9E9E9;
		border-radius: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;

		image {
			width: 30rpx !important;
			height: 30rpx !important;
			margin-right: 7rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;

		}
	}

	.input-radio-ac {
		background: #D3FFEE;
		color: #23B97F;
	}

	.select {
		.input-tx {
			text-align: right;

		}
	}

	.footer {
		width: 690rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		font-size: 26rpx;
		margin-bottom: 24rpx;
		white-space: normal;

		.radio {
			transform: scale(0.7)
		}

		text {
			color: darkslateblue;
		}
	}
</style>